*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

#bg{
    background-image: url("Bg.png");  
    position: absolute;
    z-index: -1;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    transform-origin: top left;
    background-size: cover;
    filter: brightness(0.45);
    opacity: 1;
    background-repeat: no-repeat;
    transform-origin: top left;
}

.title
{
  display: none;
  padding: 1em 1.5em;
  background: rgba(0,0,0,.35);
  border: 5px solid #FFF;
}

body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.logo{
    margin: min(3vh, 6rem) 0px 0px clamp(20vw, 2vw, 1rem);
    font-size: clamp(5vw, 7.5vw, 1rem);
    text-shadow: 0px 0px 80px #eec054, 10px 10px 20px #1e180a;
    color: #E6B23C;
    cursor: pointer;
    transition: ease-in-out 1s;
}

.logo:hover{
  text-shadow:10px 10px 60px #1e180a;
  color: #574e29;
}

/* intro textbox stuff */

.intro-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    background-color: rgba(23, 23, 23, 0.8);
    transition: opacity 2s ease-in-out;
    z-index: 2; 
  }

  #blur{
    background-image: url("Bg.png");  
    position: fixed;
    background-size: cover;
    height: 300%;
    width: 100%;
    opacity: 1;
    z-index: -1;
  }
  
  .icont {
    z-index: 3;
    text-align: center;
    display: block;
margin: clamp(0.1rem, 5rem, 10rem) 0px 0px 0px;
font-size: clamp(5vw, 8vw, 1rem);
color: #B1B381;
text-shadow: 0px 5px 5px #1e180a;
transition: all 0.2s ease-in-out;
  }
  
  #smallerint{
    display: block;
    margin: clamp(0.1rem, 2rem, 5rem) 0px 0px 0px;
    font-size: clamp(3vw, 4.5vw, 1.5rem);
    color: #B1B381;
    text-shadow: 0px 5px 5px #1e180a;
    text-align: center;
  }

  #click{
    position: flex;
    margin: clamp(1rem, 8rem, 10rem) 0px  0px 0px;
    border: none;
  background-color: inherit;
  font-size: clamp(5vw, 8vw, 5rem);
  cursor: pointer;
  display: inline-block;
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  transition: all 0.2s ease-in-out;
  
  }

  #click:hover{
    color: #746647;
    transform: translateY(3px);
    text-shadow: 0px -2px 0px #1e180a;
  }

  input:checked ~ .intro-overlay {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  input:checked ~ .intro-overlay .icont {
    transition: opacity 0.1s ease-in-out;
  }

/* intro textbox stuff */

.tagline{
  display: block;
    text-align: right;
    margin: 2px clamp(22vw, 70vw, 3vw) 0px 30px;
    font-size: clamp(1.5vw, 4vw, 1.2rem);
    text-shadow: 0px 5px 30px #1e180a, 0px 0px 80px #eec054;
    color: #E6B23C;
    animation: flicker 0s infinite;
}

@keyframes flicker {
    30% {
       text-shadow: 0px 0px 50px #eec054;
    }
}

.titles{
    border: none;
  background-color: inherit;
  position: absolute;
  font-size: clamp(4vw, 7vw, 2rem);
  cursor: pointer;
  display: inline-block;
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  transition: all 0.2s ease-in-out;
}

.titles:hover {
    color: #746647;
    transform: translateY(3px);
    text-shadow: 0px 0px 0px #1e180a;
    cursor: pointer;
}

.titles:focus{
    text-shadow: 0px 0px 20px #eec054;
    transform: translateY(3px);
    color: #E6B23C;
    animation: flicker 0s infinite;
}

/* Community click */

#community{
  margin: max(10%, 150px) 60%;
}

#coms:checked ~ #community{
    text-shadow: 0px 0px 20px #eec054;
    transform: translateY(3px);
    color: #E6B23C;
    animation: flicker 10s infinite;
}

#coms:checked ~ #skill{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #coms:checked ~ #finan{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #coms:checked ~ #carb{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #coms:checked ~ #people{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

/* Access click */

#access{
    margin: max(6vw, 80px) max(15vw, 10px);
}

#accs:checked ~ #access{
    text-shadow: 0px 0px 20px #eec054;
    transform: translateY(3px);
    color: #E6B23C;
    animation: flicker 10s infinite;
}

#accs:checked ~ #decarb{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #accs:checked ~ #ofgem{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #accs:checked ~ #policy{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #accs:checked ~ #microgrid{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  /* Smart Meter click */

#smart{
  margin: max(25vw, 285px) max(7vw, 7%);
}

#smrt:checked ~ #smart{
    text-shadow: 0px 0px 20px #eec054;
    transform: translateY(3px);
    color: #E6B23C;
    animation: flicker 10s infinite;
}

#smrt:checked ~ #incent{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #smrt:checked ~ #efficiency{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #smrt:checked ~ #foot{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #smrt:checked ~ #data{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

/* Renewables click */

#renew{
  margin: max(33vw, 350px) max(50vw, 60vw);
}

#rnw:checked ~ #renew{
    text-shadow: 0px 0px 20px #eec054;
    transform: translateY(3px);
    color: #E6B23C;
    animation: flicker 10s infinite;
}

#rnw:checked ~ #solar{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #rnw:checked ~ #wind{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #rnw:checked ~ #ecodesign{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

  #rnw:checked ~ #embedded{
    display: block;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-20%);
  }

/* Subtitles*/

.subt{
    border: none;
    background-color: inherit;
    position: absolute;
    font-size: max(3vw, 20px);
    cursor: pointer;
    display: block;
    color: #81b3ac;
    text-shadow: 0px 5px 5px #1e180a;
    transition: all 0.2s ease-in-out;
}

.subt:hover {
    color: #477473;
    text-shadow: 0px 0px 0px #1e180a;
    cursor: pointer;
}

/* Access radio*/

#decarb{
  margin: max(15vw, 150px) max(7vw, 30px);
    pointer-events: none;
    opacity: 0;
}

#dec:checked ~ #decarb{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#ofgem{
  margin: max(21vw, 240px) max(37vw, 40px);
    pointer-events: none;
    opacity: 0;
    cursor: pointer;
}

#ofg:checked ~ #ofgem{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#policy{
  margin: max(1vw, 15px) max(5vw, 30px);
    pointer-events: none;
    opacity: 0;
}

#pol:checked ~ #policy{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#microgrid{
  margin: max(1vw, 90px) max(40vw, 190px);
    pointer-events: none;
    opacity: 0;
}

#mic:checked ~ #microgrid{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

/* Renewables radio*/

#solar{
  margin: max(20vw, 320px) max(180px, 80vw);
    pointer-events: none;
    opacity: 0;
}

#slr:checked ~ #solar{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#wind{
  margin: max(20vw, 330px) max(36vw, 10vw);
    pointer-events: none;
    opacity: 0;
}

#wnd:checked ~ #wind{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#ecodesign{
  margin: max(20vw, 395px) max(53vw, 50px);
    pointer-events: none;
    opacity: 0;
}

#ecod:checked ~ #ecodesign{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#embedded{
  margin: max(34vw, 425px) max(1vw, 10vw);
    pointer-events: none;
    opacity: 0;
}

#emb:checked ~ #embedded{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

/* Community radio*/

#finan{
  margin: max(3vw, 30px) max(45vw, 180px);
    pointer-events: none;
    opacity: 0;
}

#fin:checked ~ #finan{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#skill{
  margin: max(0.2vw, 80px) max(150px, 76vw);
    pointer-events: none;
    opacity: 0;
}

#skl:checked ~ #skill{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#carb{
  margin: max(3vw, 250px) max(37vw, 8px);
    pointer-events: none;
    opacity: 0;
}

#cc:checked ~ #carb{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#people{
  margin: max(3vw, 190px) max(20vw, 2vw);
    pointer-events: none;
    opacity: 0;
}

#ppr:checked ~ #people{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

/* Smart Meter radio*/

#incent{
  margin: max(1vw, 230px) max(5vw, 30px);
    pointer-events: none;
    opacity: 0;
}

#iaj:checked ~ #incent{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#efficiency{
  margin: max(38vw, 400px) max(30vw, 30px);
    pointer-events: none;
    opacity: 0;
}

#eff:checked ~ #efficiency{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#foot{
  margin: max(33vw, 350px) max(7vw, 30px);
    pointer-events: none;
    opacity: 0;
}

#cf:checked ~ #foot{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

#data{
  margin: max(19vw, 270px) max(37vw, 165px);
    pointer-events: none;
    opacity: 0;
}

#dith:checked ~ #data{
    text-shadow: 0px 0px 20px #54eedc;
    color: #54eedc;
    animation: flicker 10s infinite;
}

/*Pop up*/


.pop-up-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(23, 23, 23, 0.7);
  overflow: scroll;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  visibility: hidden;
  color: visible;
  display: none;
}


.pop-up-overlay:before {
  content: "";
  position: absolute;
  width : 100%;
  height: 100%;
  background: inherit;
  z-index: -1;

  filter        : blur(10px);
  -moz-filter   : blur(10px);
  -webkit-filter: blur(10px);
  -o-filter     : blur(10px);

  transition        : all 2s linear;
  -moz-transition   : all 2s linear;
  -webkit-transition: all 2s linear;
  -o-transition     : all 2s linear;
}

.pop-up-overlay:target {
  visibility: visible;
  opacity: 1;
  display: block;
}

.pop-up {
  text-align: center;
}

.pop-up p {
  margin: 5% 5%;
}

.pop-up-title{
text-align: center;
margin: 65px 0px 0px 0px;
font-size: max(2.5rem, 8vw);
display: block;
color: #B1B381;
text-shadow: 0px 5px 5px #1e180a;
transition: all 0.2s ease-in-out;
}

#cam {
  font-size: max(1rem, 3vw);
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

#cam:hover {
  color: #746647;
  transform: translateY(3px);
  text-shadow: 0px 0px 0px #1e180a;
}

#link {
  line-height: 1.5;
  font-size: max(0.8rem, 2vw);
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  text-align: justify;
}

#link:hover {
  color: #746647;
  transform: translateY(3px);
  text-shadow: 0px 0px 0px #1e180a;
}

.close {
  font-family: Georgia, 'Times New Roman', Times, serif;
  position: absolute;
  display: block;
  color: #B1B381;
  text-decoration: none;
  font-size: clamp(3vw, 13vw, 6rem);
  top: 3.5%;
  right: 5%;
}

.subtag{
  font-size: max(1.3rem, 4vw);
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  text-align: center;
}

.transcript{
  line-height: 1.5;
  font-size: max(0.9rem, 1.5vw);
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  text-align: justify;
}

.Ltranscript{
  font-size: max(0.8rem, 2vw);
  color: #B1B381;
  text-shadow: 0px 5px 5px #1e180a;
  text-align: center;
}

.Lpop-up-title{
  text-align: center;
  padding: 14px 28px;
  margin: 90px 0px 0px 0px;
  font-size: max(2.9rem, 9vw);
  display: inline-block;
  color: #E6B23C;
  text-shadow: 0px 5px 10px #1e180a;
  transition: all 0.2s ease-in-out;
  }